/* ---------------------------------------- 默认css针对16:9标准比例屏幕微信----------------------------------------*/
html,body,article{
	position: fixed;
	padding: 0;
	margin: 0;
	height: 100%!important;
    width: 100%;
	overflow: hidden;
	-webkit-text-size-adjust:100%!important;
	background-color: #47b1be;
}
.none{
	display: none;
}
.hide{
	opacity: 0;
}
a{
	cursor: pointer;
}
a, a:visited{
	color: #fff;
}
section{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top:0;
    left: 0;
    z-index: 3;
}
aside{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
    z-index: 19;
    background-color: rgba(0,0,0,0.85);
}
img{
	pointer-events: none;
}
/* public end */

.bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
}
.bg .top{
	position: absolute;
	top: 0.25rem;
	left: 0.25rem;
	right: 0.25rem;
	bottom: 3.31rem;
	background-color: #000064;
	overflow: hidden;
}
.bg .top .circle{
	position: absolute;
	top: -1.2rem;
	left: 50%;
	width: 10rem;
	margin-left: -5rem;
}
.bg .bottom{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 5.64rem;
}
.bg .border{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0.25rem solid #00ff00;
}
/* bg end */

.lighting{
	-webkit-animation: lighting 3s ease infinite;
}
@-webkit-keyframes lighting{
	0%{opacity: 0.3;}
	50%{opacity: 1;}
	100%{opacity: 0.3;}
}

.rotating{
	-webkit-animation: rotating 10s linear infinite;
}
@-webkit-keyframes rotating{
	0%{transform: rotate(0);}
	100%{transform: rotate(360deg);}
}
.Emphasize{
	-webkit-animation: Emphasize 2s ease infinite;
}
@-webkit-keyframes Emphasize{
	0%{transform: scale(1);}
	50%{transform: scale(1.1);}
	100%{transform: scale(1);}
}
.Emphasize2{
	-webkit-animation: Emphasize2 1.5s ease infinite;
}
@-webkit-keyframes Emphasize2{
	0%{transform: scale(1);opacity: 0.5;}
	50%{transform: scale(1.2);opacity: 1;}
	100%{transform: scale(1);opacity: 0.5;}
}

.tentering{
	-webkit-animation: tentering2 0.5s 0.5s ease forwards;
	transform-origin: bottom center;
}
.tentering2{
	-webkit-animation: tentering2 0.4s 0.7s ease forwards;
	transform-origin: top center;
}
@-webkit-keyframes tentering{
	0%{transform: scale(0);opacity: 0;}
	60%{transform: scale(1.1);opacity: 1;}
	80%{transform: scale(0.9);opacity: 1;}
	100%{transform: scale(1);opacity: 1;}
}
@-webkit-keyframes tentering2{
	0%{transform: scale(0);opacity: 0;}
	100%{transform: scale(1);opacity: 1;}
}
.falling{
	-webkit-animation: falling 0.7s ease-out forwards;
}
@-webkit-keyframes falling{
	0%{transform: translate(0,-15rem);}
	80%{transform: translate(0,0);}
	84%{transform: translate(0.05rem,0);}
	88%{transform: translate(0.1rem,-0.05rem) rotate(4deg);}
	92%{transform: translate(-0.07rem,0.05rem) rotate(-2deg);}
	96%{transform: translate(-0.01rem,0.02rem) rotate(3deg);}
	100%{transform: translate(0,0) rotate(0);}
}
/* anime end */

#loadingBox{
	background-color: #47b1be;
}
#loadingBox p{
	position: absolute;
	top: 45%;
	width: 100%;
	font-size: 0.24rem;
	color: #000;
	text-align: center;
	letter-spacing: 0.01rem;
}
/* loadingBox end */

#indexBox .boxA{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/index/bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
#indexBox .boxA .time,#indexBox .boxB .up{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#indexBox .boxA .lock,#indexBox .boxB .dowm{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}
#indexBox .boxA .tips{
	position: absolute;
	top: 3.45rem;
	left: 0.12rem;
	width: 5.4rem;
}
#indexBox .boxA .enterBtn{
	position: absolute;
	top: 3.45rem;
	left: 0.12rem;
	width: 5.4rem;
	height: 1rem;
}
#indexBox .boxB{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ededed;
}
#indexBox .boxB .dialog{
	position: absolute;
	left: 0.33rem;
	height: 0.78rem;
}
#indexBox .boxB .dialogm{
	position: absolute;
	top: 2.04rem;
	right: 0.33rem;
	width: 2.66rem;
	height: 0.78rem;
}
#indexBox .boxB .dialogm .word{
	position: absolute;
	top: 0;
	right: 0;
	height: 0.78rem;
}
#userHead{
	position: absolute;
	top: 0.05rem;
	right: 0.05rem;
	height: 0.68rem;
	width: 0.68rem;
	border-radius: 4px;
}
#indexBox .boxB .d1{
	top: 1.14rem;
}
#indexBox .boxB .d3{
	top: 3.04rem;
}
#indexBox .boxB .d4{
	top: 4.04rem;
	width: 3.47rem;
}
#indexBox .boxB .head{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}
#indexBox .boxB .pdf{
	float: right;
	height: 100%;
	transform-origin: center left;
	opacity: 0.5;
}
/* indexBox end */

#introBox .title{
	position: absolute;
	top: 0.55rem;
	left: 50%;
	width: 4.6rem;
	margin-left: -2.3rem;
}
#introBox .word{
	position: absolute;
	top: 2.4rem;
	left: 50%;
	width: 3.47rem;
	margin-left: -1.735rem;
}
#introBox .bed{
	position: absolute;
	bottom: 0rem;
	left: 50%;
	width: 5.2rem;
	margin-left: -2.6rem;
}
#introBox .dan,#introBox .danP{
	position: absolute;
	bottom: 3.2rem;
	left: 50%;
	width: 2.7rem;
	margin-left: -1.35rem;
}
#introBox .btn{
	position: absolute;
	bottom: 0.3rem;
	left: 50%;
	width: 2.7rem;
	height: 0.69rem;
	margin-left: -1.35rem;
	background-image: url(../images/intro/b.png);
}
/* introBox end */

#gameBox .title{
	position: absolute;
	top: 0.55rem;
	left: 50%;
	width: 4.6rem;
	margin-left: -2.3rem;
}
#gameBox .cont{
	position: absolute;
	top: 2.65rem;
	left: 0;
	right: 0;
	bottom: 0.5rem;
}
#gameBox .cont:before{
	content: "";
	position: absolute;
	top: 0.6rem;
	left: 0.5rem;
	right: 0.5rem;
	bottom: 1.4rem;
	background-color: #29abe2;
	border: 0.05rem solid #000;
}
#gameBox .cont .readyBox,#gameBox .cont .gameBox{
	position: absolute;
	top: 0;
	left: 0.8rem;
	right: 0.8rem;
	bottom: 0;
	z-index: 2;
	background-color: #000064;
	border: 0.05rem solid #00ff00;
}
#gameBox .cont .readyBox .num{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	font-size: 2.6rem;
	text-align: center;
	color: #00ff00;
	transform: translate(0, -65%);
}
#gameBox .cont .readyBox .tips{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	font-size: 0.24rem;
	letter-spacing: 0.03rem;
	text-align: center;
	font-weight: bold;
	color: #00ff00;
	margin-top: 2rem;
}
#gameBox .cont .time{
	position: absolute;
	top: -0.45rem;
	left: 50%;
	width: 2.04rem;
	height: 0.89rem;
	background-image: url(../images/game/time.png); 
	margin-left: -1.02rem;
	z-index: 3;
	color: #00ff00;
	text-align: center;
	line-height: 1rem;
	font-size: 0.4rem;
}

#gameBox .cont .gameBox{
	background-color: #e3e3e3;
	border-color: #000;
}
#gameBox .cont .gameBox .road,#game{
	position: absolute;
	left: 0;
	bottom: 0.15rem;
	width: 100%;
	height: 80%;
}
#game{
	padding-top: 0.2rem;
}
#game .item{
	float: left;
	width: 1.04rem;
	height: 0.87rem;
	margin-left: 0.2rem;
	margin-bottom: 0.55rem;
	position: relative;
}
#game .item .dialog{
	position: absolute;
	top: -0.4rem;
	left: 50%;
	width: 1.8rem;
	margin-left: -0.9rem;
	z-index: 2;
}
#game .item .up,#game .item .down,#game .item .danBox{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1.04rem;
}
#game .item .danBox{
	height: 0.87rem;
	overflow: hidden;
}
#game .item .dan{
	width: 100%;
	transform: translate(0, 100%);
}
#game .item .animeBox{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.23rem;
	height: 1.12rem;
	margin: -0.56rem 0 0 -0.615rem;
	opacity: 0;
}
#game .item .animeBox img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* gameBox end */
#resultBox .topBox{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transform: scale(0.87,0.87);
}
#resultBox .title{
	position: absolute;
	top: 0.5rem;
	left: 50%;
	width: 4.6rem;
	margin-left: -2.3rem;
}
#resultBox .word{
	position: absolute;
	top: 2.2rem;
	left: 50%;
	width: 4.55rem;
	margin-left: -2.275rem;
}
#resultBox .dan{
	position: absolute;
	top: 3.05rem;
	left: 50%;
	width: 4.11rem;
	height: 5.91rem;
	margin-left: -2.055rem;
	background-image: url(../images/result/dan.png);
}
#resultBox .dan .scoreBox{
	position: absolute;
	bottom: 0.32rem;
	left: 50%;
	width: 3.47rem;
	height: 0.4rem;
	margin-left: -1.735rem;
	background-image: url(../images/result/score.png);
}
#resultBox .dan .scoreBox .score{
	position: absolute;
	top: 0.12rem;
	left: 2.41rem;
	width: 0.5rem;
	font-size: 0.2rem;
	text-align: center;
	transform: rotate(-10deg);
}

#resultBox .tips{
	position: absolute;
	bottom: 1.05rem;
	left: 50%;
	width: 4.71rem;
	margin-left: -2.355rem;
	transform-origin: top center;
}
#resultBox .btnBox{
	position: absolute;
	bottom: 0.33rem;
	left: 50%;
	margin-left: -2rem;
	width: 4rem;
	height: 0.63rem;
	background-image: url(../images/result/btns.png);
}
#resultBox .btnBox .btn{
	float: left;
	width: 50%;
	height: 100%;
}

/* resultBox end */

#shareBox .share{
	position: absolute;
	right: 0.1rem;
	top: 0.2rem;
	width: 100%;
}
/* shareBox end */
/*---------------------------------------- 15:9 ----------------------*/
.screen159 #indexBox .boxB .d1{
	top: 1rem;
}
.screen159 #indexBox .boxB .d2{
	top: 1.7rem;
}
.screen159 #indexBox .boxB .d3{
	top: 2.45rem;
}
.screen159 #indexBox .boxB .d4{
	top: 3.4rem;
}
.screen159 #introBox .word{
	top: 2.2rem;
}
.screen159 #game{
	padding-top: 0.1rem;
}
.screen159 #game .item{
	margin-bottom: 0.35rem;
}
.screen159 #resultBox .topBox{
	transform: scale(0.77,0.77);
}
/*---------------------------------------- 18:9 ----------------------*/
.screen189 #introBox .word{
	top: 3.1rem;
}
.screen189 #indexBox .boxB .d1{
	top: 1.49rem;
}
.screen189 #indexBox .boxB .d2{
	top: 2.63rem;
}
.screen189 #indexBox .boxB .d3{
	top: 3.79rem;
}
.screen189 #indexBox .boxB .d4{
	top: 5rem;
}
.screen189 #introBox .bed{
	bottom: 0.2rem;
}
.screen189 #introBox .dan,.screen189 #introBox .danP{
	bottom: 3.4rem;
	width: 3rem;
	margin-left: -1.5rem;
}
.screen189 #introBox .btn{
	bottom: 0.4rem;
}
.screen189 #game{
	padding-top: 0.5rem;
}
.screen189 #game .item{
	margin-bottom: 0.9rem;
}
.screen189 #resultBox .topBox{
	top: 0.5rem;
}
.screen189 #resultBox .tips{
	bottom: 1.8rem;
}
.screen189 #resultBox .btnBox{
	bottom: 0.8rem;
}